<script setup lang='ts' name="category">
import { onBeforeUnmount, onMounted, ref } from 'vue'

const props = defineProps<{
    opts: any
}>()

const emits = defineEmits(['itemEnter', 'itemClick', 'clickHandle'])

const { opts } = toRefs(props)

const el = ref<any>()
const show = ref(false)

const active = ref<any>([])
const idx = ref<any>()

function itemEnter(e: any, item: any, index) {
    console.log(11, e)

    idx.value = index
    active.value = item.children
    show.value = true

    emits('itemEnter', true, item)
}

function bodyLeave() {
    idx.value = ''
    show.value = false

    emits('itemEnter', false)
}

function clickHandle(item: any) {
    emits('itemClick', item)
}

onMounted(() => {
    el.value = document.querySelector('.home-swiper')
    el.value?.addEventListener('mouseleave', bodyLeave)
})

onBeforeUnmount(() => {
    el.value.removeEventListener('mouseleave', bodyLeave)
})
</script>

<template>
    <div class="category-box pt-16 bg-#fff rounded-4 relative h-560 w-212 cursor-pointer z-2">
        <div v-for="(item, index) in opts"
             :key="item.pid"
             :class="{ active_sty: idx === index }"
             class="pl-23 pr-16 lh-35 flex justify-between items-center"
             @mouseenter="itemEnter($event, item, index)"
        >
            <div class="flex items-center">
                <el-tooltip :disabled="item.categoryName.length < 13"
                            effect="light"
                            :content="item.categoryName"
                            placement="top"
                >
                    <div class="text-ellipsis text-left w-150 cursor-pointer ws-nowrap of-hidden"
                         @click="clickHandle(item)"
                    >
                        {{ item.categoryName }}
                    </div>
                </el-tooltip>
            </div>

            <el-icon>
                <ArrowRight />
            </el-icon>
        </div>

        <slot :scoped="active" />
    </div>
</template>

<style lang="less" scoped>
.active_sty {
    background: #efebeb;
}

.category-box {
    overflow: hidden scroll;
}

/* 自定义整个滚动条 */
.category-box::-webkit-scrollbar {
    width: 4px;
}

/* 自定义滚动条轨道 */
.category-box::-webkit-scrollbar-track {
    // background: #f1f1f1;
}

/* 自定义滚动条的滑块（thumb） */
.category-box::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
.category-box::-webkit-scrollbar-thumb:hover {
    // background: #555;
}
</style>
